<!-- 就业形式 maomao-->
<template>
	<view class="job bg-white">
		<view class="commonTitle flex alignCenter bold font14">
			<text class="onlyStyle"></text>
			<text>毕业生签约地区</text>
		</view>
		<view class="charts-box">
			<qiun-data-charts inScrollView type="bar" :opts="opts" :chartData="chartData" />
		</view>
		<template v-if="chartData2">
			<view class="commonTitle flex alignCenter bold font14">
				<text class="onlyStyle"></text>
				<text>毕业生签约单位性质</text>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="column" :opts="optsColumn" :chartData="chartData2" />
			</view>
		</template>
		<view class="commonTitle flex alignCenter bold font14">
			<text class="onlyStyle"></text>
			<text>主要签约单位</text>
		</view>
		<view class="company">
			<view class="flex alignCenter font14 header">
				<view class="width50">序号</view>
				<view class="">单位名称</view>
				<view class="width50">人数</view>
			</view>
			<view class="content">
				<view class="flex alignCenter font14 conData" v-for="(item,index) in companyArr" :key="index">
					<view class="width50">{{index+1}}</view>
					<view class="name">{{item.name}}</view>
					<view class="width50">{{item.num}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import qiunDataCharts from '../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	import {
		getJobData
	} from "@/api/toolbox.js"
	export default {
		components: {
			qiunDataCharts
		},
		props: {
			title: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

				companyArr: [],
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					padding: [15, 30, 0, 5],
					color: ['rgba(247, 221, 94, 0.8)'],
					// color: ["#0bb976"],
					padding: [15, 30, 0, 5],
					enableScroll: false,
					legend: {
						show: false,
					},
					xAxis: {
						disabled: true,
						boundaryGap: "justify",
						disableGrid: true,
						min: 0,
						axisLine: false,
						max: 40
					},
					yAxis: {},
					extra: {
						bar: {
							type: "stack",
							width: 20,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							barBorderCircle: true,
							seriesGap: 2,
							categoryGap: 2
						}
					}
				},
				optsColumn: {
					// color: ["#0bb976"],
					color: ['rgba(247, 221, 94, 0.8)'],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						rotateLabel: true,
						rotateAngle: 45,
						marginTop: 10,
					},
					yAxis: {
						disableGrid: true,
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 12,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			}
		},
		methods: {
			getData() {
				getJobData({
					title: this.title
				}).then((res) => {
					if (res.code == 100000) {
						console.log('res: ', res.data.province);
						let list = [];
						let num = 0;
						res.data.province.forEach((e, i) => {
							if (i < 10) {
								list.push(e);
							} else {
								num += Number(e.rate);
							}
						})
						list.push({
							id: 0,
							num: num.toFixed(2),
							province: "其他",
							province_name: "其他",
							rate: num.toFixed(2),
							school_id: 0,
							year: 0
						})
						this.companyArr = res.data.company
						let province = []
						let proRate = []

						list.forEach((item) => {
							province.push(item.province)
							proRate.push(item.rate)
						})
						let company = []
						let companyRate = []
						for (let key in res.data.attr) {
							company.push(key)
							companyRate.push(res.data.attr[key])
						}
						let result = {
							categories: province,
							series: [{
								name: "",
								data: proRate,
								format: 'yAxisDemo3'
							}]
						};
						let result2 = {
							categories: company,
							series: [{
								name: "",
								data: companyRate,
								format: 'yAxisDemo3'
							}]
						};
						this.chartData = JSON.parse(JSON.stringify(result));
						this.chartData2 = JSON.parse(JSON.stringify(result2));
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.width50 {
		width: 100rpx;
		flex: 0 0 20% !important;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.commonTitle {
		margin: 30rpx 0;

		// padding:0 30rpx;
		// box-sizing: border-box;
		.onlyStyle {
			width: 20rpx;
			height: 60rpx;
			border-radius: 0 15rpx 15rpx 0;
			background: $colorMain;
			margin-right: 10rpx;
			flex-shrink: 0;
		}
	}

	.company {
		background: #fff;

		.header {
			background: $pageBgColor;

			&>view {
				border: 1px solid $bordercolor;
				border-left: none;
				flex: 1;
				text-align: center;
			}
		}
	}

	.content {
		.conData {
			border-bottom: 1px solid $bordercolor;

			&>view {
				// border-left:1px solid $bordercolor;
				flex: 1;
				text-align: center;
			}

			.name {
				border: 1px solid $bordercolor;
				border-top: none;
				border-bottom: none;
			}
		}

	}
</style>